<template>
  <div class="app-container">
    <div class="module-box" v-if="validateForm">
      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">基本信息</span>
        </div>
        <div class="form module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-form label-position="right" label-width="230px">
            <el-col :span="12">
              <el-form-item label="姓名：">
                <el-input readonly :value="validateForm.applicantName" />
              </el-form-item>
              <el-form-item label="代理人姓名：">
                <el-input readonly :value="validateForm.agentName" />
              </el-form-item>
              <el-form-item label="手机号码：">
                <el-input readonly :value="validateForm.mobilePhone" />
              </el-form-item>
              <el-form-item label="类型：">
                <el-input readonly :value="validateForm.reclaimType.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号：">
                <el-input readonly :value="validateForm.applicantNum" />
              </el-form-item>
              <el-form-item label="代理人身份证号：">
                <el-input readonly :value="validateForm.agentNum" />
              </el-form-item>
              <el-form-item label="通讯地址：">
                <el-input readonly :value="validateForm.address" />
              </el-form-item>
              <el-form-item label="去向：">
                <el-input readonly :value="validateForm.reclaimWhere.name" />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>

      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">家庭成员信息</span>
        </div>
        <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-table :data="validateForm.familyMemberList" highlight-current-row>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="relation" label="与申请人关系"></el-table-column>
            <el-table-column prop="mobile" label="手机号码"></el-table-column>
            <el-table-column prop="num" label="身份证号码"></el-table-column>
          </el-table>
        </div>
      </div>

      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">权证信息</span>
        </div>
        <div class="form module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-form label-position="right" label-width="230px">
            <el-col :span="12">
              <el-form-item label="证件类型：">
                <el-input readonly :value="validateForm.certificateType.name" />
              </el-form-item>
              <el-form-item label="发证时间：">
                <el-input readonly :value="validateForm.issueCertificateDate" />
              </el-form-item>
              <el-form-item label="权利人：">
                <el-input readonly :value="validateForm.obligeeName" />
              </el-form-item>
              <el-form-item label="是否愿意预留农村发展指标：">
                <el-input readonly :value="validateForm.isRemainDto.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码：">
                <el-input readonly :value="validateForm.certificateNum" />
              </el-form-item>
              <el-form-item label="土地使用权面积：">
                <el-input readonly :value="validateForm.landArea">
                  <span slot="suffix">㎡</span>
                </el-input>
                <!-- <el-input readonly :value="validateForm.landArea" /> -->
              </el-form-item>
              <el-form-item label="土地坐落：">
                <el-input readonly :value="validateForm.landAddress" />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>

      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">附件信息</span>
        </div>
        <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-table :data="fileList" highlight-current-row>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="handleImageDialog(scope.row.url)">查看</el-button>
                <el-button type="text" @click="handleDownload(scope.row.url)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      
    </div>
  </div>
</template>

<script>
import { queryApplyDetailById } from "@/api/project/fksqtc/personApplyCheck";
import config from "@/config";

export default {
  data() {
    return {
      validateForm: null,
      param: null, // 路由参数
      fileList: [{ type: "身份证正面" }, { type: "身份证反面" }, { type: "户口簿家庭成员关系" }, { type: "权证证明" }, { type: "	农户去向证明" }],
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  watch: {},
  created() {
    this.param = this.$route.query;
    this.handleDetail();
  },
  methods: {
    handleDetail() {
      queryApplyDetailById({
        landId: this.param.id
      }).then(res => {
        this.validateForm = res.data;
        if (res.data != null) {
          this.fileList.forEach((item, index) => {
            item.url = config.baseUrlImg + this.validateForm[`attachment${index + 1}Url`];
          });
        }
      });
    },
    handleImageDialog(url) {
      console.log(url,"url")
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    handleDownload(url) {
      window.open(url);
    }
  }
};
</script>

<style lang="scss" scoped>
.module-item {
  width: 100%;
  background-color: #fff;
}

.module-item-title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}

.module-item-content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}

.form {
  /deep/ .el-input {
    width: 200px;
  }
}

.submit-box {
  text-align: left;
  margin-top: 20px;
}
</style>
 